<template>
  <!--模板-->
    增删改查的演示
  <hr>
  <!--查询控件 延迟加载-->
  <div style="height: 65px;">
    <component
      :is="delay[delayKind.find]"
      :moduleId="moduleId"
    >
    </component>
  </div>
  <!--操作按钮 延迟加载-->
  <div style="height: 30px;">
    <component
      :is="delay[delayKind.button]"
      :selection="state.selection"
      :moduleId="moduleId"
    >
    </component>
  </div>
  <!--列表控件-->
  <my-grid
    :moduleId="moduleId"
    :selection="state.selection"
    :pagerInfo="state.pagerInfo"
  >
  </my-grid>
  <!--分页-->
  <my-pager
    :pagerInfo="state.pagerInfo"
  >
  </my-pager>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { reactive, defineAsyncComponent } from 'vue'
  import _formMeta from '../form/form.json'

  // 加载组件
  import myPager from './components/pager.vue'
  import myGrid from './components/grid.vue'
  // import myFind from './components/find.vue'
  // import myButton from './components/button.vue'

  import { regListState } from './controller/test-list'

  export default defineComponent({
    name: 'nf-ui-elp-crud',
    components: {
      myPager,
      myGrid
    },
    props: {
    },
    setup(props, context) {

      const moduleId = new Date().valueOf()
      
      // 创建 js 里面定义的局部状态
      const state = regListState()
      

      // 延迟加载
      const delay = {
        load: '',
        find: defineAsyncComponent(() => import('./components/find.vue')),
        button: defineAsyncComponent(() => import('./components/button.vue'))
      }
      const delayKind = reactive({
        find: 'load',
        button: 'load'
      })

      setTimeout(() => {
        delayKind.find = 'find'
        delayKind.button = 'button'
      }, 1)

      return {
        moduleId,
        state,
        delayKind,
        delay
      }
    }
  })
</script>